<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
</head>
<body>
	<button>点我1</button>
	<button>点我2</button>
</body>
<script>
	// 函数可以被调用，函数接收的参数可以是任意值（包括函数）
	// function fn(cb){
	// 	cb(1);
	// }
	// fn(function(num){
	// 	console.log(num)
	// });
	
// - 什么函数才是回调函数?
// 	- 你定义的
// 	- 你没有直接调用
// 	- 但最终它执行了(在特定条件或时刻)
//
// - 常见的回调函数?
// 	- DOM事件函数
// 	document.querySelector("button").onclick = function(){
// 		console.log("click");
// 	}
// 	- 定时器函数
// 	{
// 		setTimeout(()=>{
// 			console.log("timeout")
// 		},1000)
// 	}


// 	- `ajax`回调函数
// 	document.querySelector("button").onclick = function(){
// 		const xhr = new XMLHttpRequest();
// 		xhr.open("get","./5-回调函数.html");
// 		xhr.send();
// 		xhr.onload = function(){
// 			console.log("load",xhr.response)
// 		}
// 	}
// 	- 生命周期回调函数(略)
	
	// ajax({
	// 	run(){
	//
	// 	}
	// })
	
	const btns = document.querySelectorAll("button");
	function ajax(cb){
		const xhr = new XMLHttpRequest();
		xhr.open("get","./5-回调函数.html");
		xhr.send();
		xhr.onload = function(){
			cb(xhr.response);
		}
	}
	btns[0].onclick = function(){
		ajax(function(data){
			console.log(data);
		});
		
	}
	btns[1].onclick = function(){
		ajax(function(data){
			alert(data);
		});
	}
	
</script>
</html>